<template>
  <div class="home">
    <el-container>
     <el-header>
       <div class="home_header">
         <i class="el-icon-d-arrow-left"
         @click="onClickHiden"></i>
       </div>
     </el-header>
     <el-container>
       <el-aside width="200px">
         <el-menu default-active="1-4-1" 
         class="el-menu-vertical-demo" 
         @open="handleOpen" 
         @close="handleClose" 
         :collapse="isCollapse">
           <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
           </el-menu-item>
           <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
           </el-menu-item>
           <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
           </el-menu-item>
         </el-menu>
       </el-aside>
       <el-main>
         <div>
           <el-table
           :data="showUsers"
           style="width: 100%">
            <el-table-column
            prop="id"
            label="ID">
            </el-table-column>
            <el-table-column
            prop="role_name"
            label="角色名称">
            </el-table-column>
             <el-table-column
            prop="username"
            label="用户名">
            </el-table-column>
             <el-table-column
            prop="create_time"
            label="创建时间">
            </el-table-column>
             <el-table-column
            prop="mobile"
            label="手机号">
            </el-table-column>
             <el-table-column
            prop="email"
            label="邮箱">
            </el-table-column>
             <el-table-column
            label="操作">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                <el-button type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
           </el-table>
         </div>
         <div>
            <el-pagination
            :page-size="10"
            @next-click="onClickNextPage"
            @prev-click="onClickPrevPage"
            layout="prev, pager, next, jumper"
            :total="users.length">
            </el-pagination>
         </div>
       </el-main>
     </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  components: {
    
  },
  data(){
    return{
      isCollapse:false
    }
  },
  computed:{
    users:function(){
      return this.$store.state.users
    },
    showUsers:function(){
      return this.$store.getters.showUsers
    }
  },
  mounted(){
    this.$store.dispatch("GET_DATA_LIST");
  },
  methods:{
     handleOpen(key, keyPath) {
       console.log(key, keyPath);
     },
     handleClose(key, keyPath) {
       console.log(key, keyPath);
     },
     onClickHiden(){
       this.isCollapse  = !this.isCollapse;
     },
     onClickNextPage(page){
       console.log(page);
       this.$store.commit("CHANGE_PAGE_DATA",page);
     },
     onClickPrevPage(page){
       this.$store.commit("CHANGE_PAGE_DATA",page);
     }
  }
}
</script>

<style scoped>
 .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    height: 10vh;
   
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    height: 90vh;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    height: 90vh;
  }

  .home_header
  {
    width: 100%;
    height: 100%;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
  }
  
</style>
